<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-16 16:29:27
 * @LastEditTime: 2023-12-27 15:07:25
 * @LastEditors: huangshuai 
-->
<template>
  <div class="report-handle" v-loading="loading">
    <div class="pet-info-card">
      <el-form :model="form" label-width="120px" style="display: flex">
        <el-form-item label="举报内容">
          <el-input v-model="form.content" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.reportCategory" placeholder="请选择分类">
            <el-option label="全部" value="" />
            <el-option label="宠物方面" value="0" />
            <el-option label="住户方面" value="1" />
            <el-option label="社区管理人方面" value="2" />
            <el-option label="其他方面" value="3" />
          </el-select>
        </el-form-item>
        <div style="width: 20px"></div>
        <el-button @click="getListData" type="primary" :icon="Search"
          >搜索</el-button
        >
      </el-form>
    </div>

    <el-table
      :data="tableData"
      stripe
      style="width: 95%"
      border
      max-height="500"
    >
      <el-table-column prop="iconUrl" label="头像" align="center" width="80">
        <template #default="scope">
          <el-image
            v-if="scope.row.iconUrl"
            style="width: 50px; height: 50px; border-radius: 50px"
            :src="scope.row.iconUrl"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-teleported="true"
            :preview-src-list="[scope.row.iconUrl]"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="nickName"
        align="center"
        label="用户昵称"
        width="120"
      />
      <el-table-column
        prop="content"
        label="内容"
        align="center"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="分类" width="150">
        <template #default="scope">
          <span v-if="scope.row.reportCategory === '0'"> 宠物方面</span>

          <span v-else-if="scope.row.reportCategory === '1'">住户方面</span>
          <span v-else-if="scope.row.reportCategory === '2'"
            >社区管理人方面</span
          >
          <span v-else-if="scope.row.reportCategory === '3'">其他方面</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="创建时间"
        width="160"
      />
      <el-table-column
        prop="updateTime"
        align="center"
        label="审核时间"
        width="160"
      />
      <el-table-column align="center" label="审核状态" width="100">
        <template #default="scope">
          <el-button
            v-if="scope.row.examineStatus === 0"
            size="small"
            type="info"
            @click="handleUnaudited(scope.row.id)"
            >未审核</el-button
          >
          <el-button
            v-else-if="scope.row.examineStatus === 1"
            size="small"
            type="primary"
            @click="handleUnderReview(scope.row.id)"
            >正在审核</el-button
          >
          <el-button v-else size="small" type="success">已审核</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
            v-if="scope.row.pushStatus === 0"
            size="small"
            @click="handleSendUser(scope.row)"
            >推送用户</el-button
          >
          <el-button
            disabled
            v-if="scope.row.pushStatus === 1"
            size="small"
            @click="handleSendUser(scope.row)"
            >已推送</el-button
          >
          <el-button size="small" @click="handleLook(scope.row)"
            >展示内容</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 95%; margin-top: 10px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 15, 20, 25]"
        :small="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>

  <!-- 点击未审核状态---------弹框 -->
  <el-dialog v-model="statusDialog" title="切换审核状态" width="30%">
    <div class="dialog-context">
      <el-button
        size="large"
        type="info"
        class="dialog-button"
        :class="{ selectedButton1: isSelectedId === 1 }"
        @click="isSelectedId = 1"
        >正在审核</el-button
      >
      <el-button
        size="large"
        type="info"
        class="dialog-button"
        :class="{ selectedButton2: isSelectedId === 2 }"
        @click="isSelectedId = 2"
        >已审核</el-button
      >
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="(statusDialog = false), (isSelectedId = -1)"
          >取消</el-button
        >
        <el-button type="primary" @click="confirmChange(isSelectedId)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 点击正在审核状态---------弹框 -->
  <el-dialog v-model="statusCompleteDialog" width="30%">
    <div class="dialog2-context">是否切换到已审核状态？</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="statusCompleteDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmChange2"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <ContextDialog ref="contextDialogRef" />
  <SendUserListDialog ref="sulDialogRef" @getListData="getListData" />
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";

import ContextDialog from "./context-dialog.vue";
import SendUserListDialog from "./send-user-list-dialog.vue";
import { getListReportInfo, updateReportExamineStatus } from "@/api/manager";

const form = reactive<any>({
  reportCategory: "",
  content: "",
});
const userInfo = reactive({
  reportId: -1 as Number,
  status: -1 as Number,
});
interface TableDataType {
  content: string;
  reportCategory: string;
  createTime: string;
  updateTime: string;
  examineStatus: string;
  iconUrl: string;
  nickName: string;
}
const tableData = ref<TableDataType[]>([]);
//-------------------------
//分页
//-------------------------
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const handleSizeChange = () => {
  getListData();
};
const handleCurrentChange = () => {
  getListData();
};
//-------------------------
//---------弹框-----------
//-------------------------
const contextDialogRef = ref();
const sulDialogRef = ref();
const isSelectedId = ref<Number>(-1);
const handleLook = (data: string) => {
  contextDialogRef.value.showDialog(data);
};
//推送用户
const handleSendUser = (data: any) => {
  sulDialogRef.value.showDialog(data);
};
//***************
//点击未审核状态---------弹框
//***************
const statusDialog = ref(false); //切换正在审核和审核完成状态
const handleUnaudited = (id: Number) => {
  isSelectedId.value = -1;
  userInfo.reportId = id;
  statusDialog.value = true;
};
const confirmChange = async (statusData: Number) => {
  if (statusData === -1) {
    statusDialog.value = false;
    return;
  }
  statusDialog.value = false;
  isSelectedId.value = -1;
  await updateReportExamineStatus(userInfo.reportId, statusData).then(() => {
    userInfo.reportId = -1;
    getListData();
  });
};
//***************
//点击正在审核状态---------弹框
//***************
const statusCompleteDialog = ref(false); //切换审核完成状态
const handleUnderReview = (id: Number) => {
  userInfo.reportId = id;
  statusCompleteDialog.value = true;
};
const confirmChange2 = () => {
  isSelectedId.value = -1;
  updateReportExamineStatus(userInfo.reportId, 2).then(() => {
    userInfo.reportId = -1;
    getListData();
  });
  statusCompleteDialog.value = false;
};

//*************************
//******获取列表信息*********
//*************************
const loading = ref<boolean>(false);
const getListData = async () => {
  loading.value = true;
  await getListReportInfo(
    form.content,
    currentPage.value,
    pageSize.value,
    form.reportCategory
  ).then((res: any) => {
    console.log(res.data, "rrr");

    tableData.value = res.data;
    total.value = +res.total;
  });
  loading.value = false;
};

onMounted(() => {
  getListData();
});
</script>

<style scoped lang="less">
.report-handle {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;
  :deep(.el-popper) {
    display: none;
  }
}
.selectedButton2 {
  background-color: #67c23a;
}
.selectedButton1 {
  background-color: #409eff;
}
.dialog-context {
  width: 100%;
  // background-color: red;
  display: flex;
  justify-content: center;
}
.dialog-button {
  width: 120px;
  height: 50px;
  margin: 20px;
}
.dialog2-context {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}
.pet-info-card {
  width: 100%;
  padding: 10px;
}
</style>
